<template>
  <view class="goodList">
      <!-- 吸顶效果组件 -->
      <u-sticky>
        <!-- 搜索部分 -->
        <ugo-search></ugo-search>
        <!-- taber标题的静态显示 -->        
        <u-tabs
        class="taberBar" 
        :list="list"
        :is-scroll="false"
        :current="current"
        @change="change"
        active-color="#ea4350"
        bar-width="184"
        ></u-tabs>
    </u-sticky>
    <!-- taber对应的内容显示 -->
    <view v-if="current===0">
            <!-- 显示的内容部分 -->
            <view class="goods-conten">
                <!-- 循环显示的点 -->
                <navigator 
                class="goods-item" 
                v-for="item in goods" 
                :key="item.goods_id"
                :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
                >
                    <!-- 图片的显示 -->
                    <view class="goods-item-img">
                    <u-image :src="item.goods_small_logo||src" width="191" height="191"></u-image>
                    </view>
                    <!-- 商品内容的显示 -->
                    <view class="goods-item-info">
                        <!-- 商品简介 -->
                        <view class="goods_name">{{ item.goods_name }}</view>
                        <!-- 商品价格 -->
                        <view class="goods_price">￥{{ item.goods_price }}</view>
                    </view>
                </navigator>
            </view>
        </view>
        <view v-if="current===1">
            销量
        </view>
        <view v-if="current===2">
            价格
        </view>
  </view>
  
</template>

<script>
export default {
data() {
    return {
        list: [{
			name: '综合'
				}, {
			name: '销量'
				}, {
			name: '价格',
			}],
		current: 0,
        goods: [],
         // 默认图片地址
        src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.2qqtouxiang.com%2Fpic%2FTX9669_01.jpg&refer=http%3A%2F%2Fimg.2qqtouxiang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648372748&t=bdad7fa9a3908defe372556a009ae987",
    }
},
async onLoad(options) {
    console.log(41,options);
     this.params = {
        // 否	string	关键字
      query: "",
      // 否	string	分类id
      cid: options.cid,
      // 否	number	页码
      pagenum: 1,
      // 否	number	页容量
      pagesize: 20,
    }   
    // 调用接口得到最新的数据
    this.getGoodsList()
},
// 上拉数据翻页
onReachBottom(){
    console.log('我是页面滚轮到达底部的时候触发的函数');
    // 判断是不是已经到达底部了，数据
    if(this.goods.length >= this.total){
        // 没有下一页数据
      uni.showToast({
        title: "没有下一页数据啦",
        icon: "none",
      });
      return;
    }
    console.log('还有下一页数据，数据增加');
    // 页面增加
    this.params.pagenum++;
    // 请求数据
    this.getGoodsList()
},
    // 页面下拉刷新
async onPullDownRefresh(){
    console.log('我刷新页面了');
    // 重置数据，再次更新数据
    this.goods = []
    this.params.pagenum = 1
    // 亲求数据
    await this.getGoodsList()
    // 关闭下拉刷新
    uni.stopPullDownRefresh()
},
methods: {
    change(index) {
        this.current = index
    },
    // 获取数据，列表渲染
    async getGoodsList() {
        const res = await this.$u.http.get('/goods/search',this.params)
        console.log(53,res,res.total);
        // 因为需要翻页，这个地方需要做数据合并
        this.goods = [...this.goods,...res.goods]
        // 获取数据总条数
        this.total = res.total;
    }
}
}
</script>

<style lang="scss">
.goods-conten {
    .goods-item {
        display: flex;
        margin-bottom: 10rpx;
        border-bottom: 1rpx solid #ccc;
        .goods-item-img {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .goods-item-info {
            flex: 2;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            .goods_price {
                color: $theme-color;
            }
        }
    }
}
</style>